<template>
    <div class="null-box">
      <div class="null">
        <el-image fit="cover" style="height: 250px;" :src="requireErrorImg()"></el-image>
        <h3>哎呀！页面被外星人挟持了</h3>
      </div>
    </div>
  </template>
  
  <script setup >
  const requireErrorImg = ()=>{
    return '/image-404.png'
  }
  </script>
  
  <style lang="scss" scoped>
  .null-box{
    height: calc(100vh - 100px  );           /* 使容器高度占据整个视口 */
    display: table;          /* 使用 table 布局 */
    width: 100%;
    .null{
      display: table-cell;     /* 使用 table-cell 布局 */
      vertical-align: middle;  /* 垂直居中 */
      text-align: center;      /* 水平居中 */
      margin: auto;            /* 自动计算边距 */
    }
  }
  </style>
  